<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html class="app-ui">

<head>
    <!-- Meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <!-- Document title -->
    <title>院校管理</title>

    <meta name="description" content="AppUI - Admin Dashboard Template & UI Framework" />
    <meta name="author" content="rustheme" />
    <meta name="robots" content="noindex, nofollow" />

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="${pageContext.request.contextPath}/assets/img/favicons/apple-touch-icon.png" />
    <link rel="icon" href="${pageContext.request.contextPath}/assets/img/favicons/favicon.ico" />

    <!-- Google fonts -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,900%7CRoboto+Slab:300,400%7CRoboto+Mono:400" />

    <!-- AppUI CSS stylesheets -->
    <link rel="stylesheet" id="css-font-awesome" href="${pageContext.request.contextPath}/assets/css/font-awesome.css" />
    <link rel="stylesheet" id="css-ionicons" href="${pageContext.request.contextPath}/assets/css/ionicons.css" />
    <link rel="stylesheet" id="css-bootstrap" href="${pageContext.request.contextPath}/assets/css/bootstrap.css" />
    <link rel="stylesheet" id="css-app" href="${pageContext.request.contextPath}/assets/css/app.css" />
    <link rel="stylesheet" id="css-app-custom" href="${pageContext.request.contextPath}/assets/css/app-custom.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/layui/css/layui.css" media="all">
    <!-- End Stylesheets -->


</head>

<body class="app-ui layout-has-drawer layout-has-fixed-header">

<div class="app-layout-canvas">
    <div class="app-layout-container">

        <!-- Drawer -->
        <aside class="app-layout-drawer">

            <!-- Drawer scroll area -->
            <div class="app-layout-drawer-scroll" style="margin-top: 50px;">
                <!-- Drawer logo -->
                <div id="logo" class="drawer-header" style="text-align: center;margin: 0 auto;font-family: 华文楷体; padding-top: 20px;">
                    <span style="font-size: 34px;"><strong>管理员后台</strong></span>
                </div>

                <!-- Drawer navigation -->
                <nav class="drawer-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item nav-drawer-header">
                            <hr color="#ccc">
                        </li>
                        <li class="nav-item">
                            <a href="schoolManager.jsp"><i class="ion-ios-monitor-outline"></i> <span style="font-size: 20px;">院校管理</span></a>
                        </li>
                    </ul>
                </nav>
                <!-- End drawer navigation -->
            </div>
            <!-- End drawer scroll area -->
        </aside>
        <!-- End drawer -->

        <!-- Header -->
        <header class="app-layout-header">
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse"
                                aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
                            <span class="sr-only">Toggle drawer</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="javascript:void(0)">
                            <img class="img-responsive" src="${pageContext.request.contextPath}/assets/img/logo/logo-frontend.png" title="强强组合商城" alt="AppUI" />
                        </a>
                    </div>

                    <div class="collapse navbar-collapse" id="header-navbar-collapse">
                        <ul id="main-menu" class="nav navbar-nav navbar-left">
                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown">English <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:void(0)">French</a></li>
                                    <li><a href="javascript:void(0)">German</a></li>
                                    <li><a href="javascript:void(0)">Italian</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown">Pages <span class="caret"></span></a>

                                <ul class="dropdown-menu">
                                    <li><a href="javascript:void(0)">Analytics</a></li>
                                    <li><a href="javascript:void(0)">Visits</a></li>
                                    <li><a href="javascript:void(0)">Changelog</a></li>
                                </ul>
                            </li>
                        </ul>
                        <!-- .navbar-left -->

                        <ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs">
                            <li class="active">
                                <a href="frontend_home.html"></a>
                            </li>
                            <li class="dropdown">
                                <a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge" style="background-color: red;">3</span></a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right" style="background-color: red;">2</span> 消息 </a>
                                    </li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right" style="background-color: red;">1</span> 通知 </a>
                                    </li>

                                </ul>
                            </li>

                            <li class="dropdown dropdown-profile">
                                <a href="javascript:void(0)" data-toggle="dropdown">
                                    <span class="m-r-sm">${admin.adminName} <span class="caret"></span></span>
                                    <img class="img-avatar img-avatar-48" src="${pageContext.request.contextPath}/file/acc/${account.accImg == null?"000000011612245316757212.png":account.accImg}" alt="User profile pic" />
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li>
                                        <a href="#" id="logout">退出</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <!-- .navbar-right -->
                    </div>
                </div>
                <!-- .container-fluid -->
            </nav>
            <!-- .navbar-default -->
        </header>
        <!-- End header -->

        <main class="app-layout-content">

            <!-- Page Content -->
            <div class="container-fluid p-y-md">
                <!-- Cards API, functionality initialized in App() -> uiCardsApi() -->
                <div class="row">

                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-block">
                                <div class="text-center" style="font-size: 24px; text-align: center;margin: 0 auto;font-family: 华文楷体;">
                                    <label style="float: left;font-size: 25px;">院校搜索：</label>
                                    <div style="float: left;">
                                        <select id="schProvince" name="schProvince" style="height: 35px;">
                                            <option value="">选择省份</option>
                                            <option value="江西省">江西省</option>
                                            <option value="北京市">北京市</option>
                                            <option value="上海市">上海市</option>
                                            <option value="广东省">广东省</option>
                                        </select>
                                        <input type="text" id="goNm" value="" placeholder="请输入院校名称" />&nbsp;&nbsp;
                                        <button class="btn btn-app-orange" id="search" type="button" data-toggle="tooltip"><span>查询</span></button>
                                        &nbsp;&nbsp;&nbsp;
                                    </div>
                                    <button class="btn btn-app-green" type="button" id="addSchoolBtn" data-toggle="tooltip"><span>+ 新增院校</span></button>
                                </div>

                                <form class="form-horizontal m-t-sm text-center row" action="base_forms_pickers_select.html" method="post"
                                      onsubmit="return false;">
                                </form>

                                <div class="table-responsive">
                                    <%--渲染表格数据--%>
                                    <table class="layui-hide" id="demo" lay-filter="test"></table>
                                    <%--动态显示按钮--%> <%--d 对象是layui 内置的--%>
                                    <script type="text/html" id="barDemo">
                                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <%--绿色--%>
                                        {{#  if(d.schStatus == 1){ }}
                                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">停用</a> <%--红色--%>
                                        <%--<a class="layui-btn layui-btn-warm layui-btn-xs no" lay-event="no">轮播隐藏</a>--%> <%--黄色--%>
                                        {{# }if(d.schStatus == 0) { }}
                                        <a class="layui-btn layui-btn-normal layui-btn-xs yes" lay-event="yes">启用</a> <%--蓝色--%>
                                        {{#  } }}
                                    </script>
                                </div>
                                <!-- .table-responsive -->
                            </div>
                        </div>
                    </div>
                    <!-- .col-sm-12 -->
                </div> </div>
                <!-- .row -->
        </main>

    </div>
    <!-- .app-layout-container -->
</div>
<!-- .app-layout-canvas -->

<div class="app-ui-mask-modal"></div>

<!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
<!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.scrollLock.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.placeholder.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/app.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/app-custom.js"></script>

<!-- Page JS Plugins -->
<script src="${pageContext.request.contextPath}/assets/js/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/plugins/bootstrap-colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/plugins/select2/select2.full.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/plugins/masked-inputs/jquery.maskedinput.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/plugins/dropzonejs/dropzone.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/plugins/jquery-tags-input/jquery.tagsinput.min.js"></script>

<script src="${pageContext.request.contextPath}/js/layui/layui.js"></script>

<script>
    $(function (){
        var schProvince = $("#schProvince").val();
        var schName = $("#goNm").val();

        //加载layui 功能模块
        layui.use(['laydate', 'table', 'carousel', 'upload'], function(){
            var laydate = layui.laydate //日期
                ,table = layui.table //表格
                ,carousel = layui.carousel //轮播
                ,upload = layui.upload //上传


            showTable();
            //定义渲染数据表格函数
            function showTable(){
                //执行一个 table 实例
                table.render({
                    elem: '#demo'   //对应 div 的id
                    // ,height: 500
                    ,url: "/admin/selectSchoolList?schProvince="+schProvince+"&schName="+schName+"" //数据接口
                    ,title: '用户表'
                    ,page: true //开启分页
                    ,cols: [[ //表头
                        {type: 'checkbox'}
                        ,{field: 'numbers', title: '序号', width:80, type: 'numbers'}
                        ,{field: 'schoolId', title: '学校ID', width:80, sort: true, hide:true}
                        ,{field: 'schName', title: '学校名称', width:120}
                        ,{field: 'schAccName', title: '账户名', width:80}
                        ,{field: 'accPwd', title: '密码', width: 60, totalRow: true}
                        ,{field: 'schProvince', title: '省份', width:80, }
                        ,{field: 'schAddress', title: '地址', width:150}
                        ,{field: 'liaisons', title: '联系人', width: 80}
                        ,{field: 'liaisonsTelephone', title: '联系电话', width: 100}
                        ,{field: 'schStatus', title: '状态', width: 80,  totalRow: true, templet: function(d){    //动态显示数据
                                if(d.schStatus == 1)
                                {return '<span style="color:#0000FF;">' + '正常' + '</span>'}
                                else
                                {return '<span style="color:red;">' + '已停用' + '</span>'}
                            }}
                        ,{fixed: 'right', title: '操作', width: 165, align:'center', toolbar: '#barDemo'}  //toolbar 对应div的id
                    ]]
                    ,limits: [5,8,10]
                    ,limit: 8 //每页默认显示的数量
                });

            }

            //监听行工具事件（即操作）
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                var schStatus = "1";
                if(layEvent === 'yes'){
                    layer.confirm('确定启用该院校吗？', function(index){
                        schStatus = 1;
                        modifySchoolStatus();
                    });
                } else if(layEvent === 'del'){  //假删除
                    layer.confirm('确定停用该院校吗？', function(index){
                    //    obj.del(); //删除对应行（tr）的DOM结构
                    //    layer.close(index);
                        //向服务端发送删除指令
                        schStatus = 0;
                        modifySchoolStatus();
                    });
                } else if(layEvent === 'edit'){      //编辑院校信息
                    var schoolId = data.schoolId;   //(data.当前行的属性名) 即可获得该行该属性的值
                    layer.open({
                        type: 2,  //设置弹窗类型为 2，表示弹出一个页面
                        title:'编辑院校信息', //弹窗标题
                        skin: 'layui-layer-rim', //加上边框
                        area: ['600px', '550px'], //设置弹窗的宽高
                        content: 'editSchoolInfo.jsp?schoolId='+schoolId   //以弹出层的形式跳转到 editSchoolInfo.jsp页面，并附带参数
                    });
                }

                /*启用或停用学校*/
                function modifySchoolStatus(){
                    var url = "/admin/modifySchoolStatus";
                    var param = {
                        schoolId:data.schoolId,  //获得院校id
                        schStatus:schStatus,
                        _method: "put"
                    }
                    $.post(url,param,function (res){
                        if(res.code == 1001){
                            layer.msg(res.msg);
                            showTable();
                        }else if(res.code == 1002){
                            layer.msg(res.msg);
                        }
                    })
                }

            });

            //点击查询按钮
            $("#search").click(function (){
                schProvince = $("#schProvince").val();
                schName = $("#goNm").val();
                showTable();
            })


        });
            //新增院校
            $("#addSchoolBtn").click(function (){
                layer.open({
                    type: 2,  //设置弹窗类型为 2，表示弹出一个页面
                    title:'新增院校', //弹窗标题
                    skin: 'layui-layer-rim', //加上边框
                    area: ['600px', '550px'], //设置弹窗的宽高
                    content: 'addSchool.jsp'
                });
            })

        /*退出登录*/
        $("#logout").click(function (event){
            event.preventDefault();
            var url = "/login/logoutShop";
            $.post(url,function (){
                window.location.href = "../../login.jsp";
            })
        })

    })

</script>

</body>

</html>

